<!--
  *@Description : 视频预览组件
  *@author 萧红
  *@date 2020-03-28 01:25
  *@LastEditTime 2020-03-28 01:25
  *@LastEdititors
-->
<template>
    <div class="videoBox">
      <!--// 视频区域-->
      <video class="myVideo video-js vjs-default-skin vjs-big-play-centered vjs-16-9" width="100%" height="100%" @click.self="changeViDeoState">
        <source  :src="vedioUrl" type="video/mp4">
      </video>
    </div>
</template>

<script>
export default {
  name: 'MyVideo',
  props: {
    vedioUrl: {
      type: String,
      default: 'http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4'
    },
    controls: {
      type: Boolean,
      default: true
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    preload: {
      type: String | Boolean,
      default: 'auto'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    fluid: {
      type: Boolean,
      default: true
    },
    poster: {
      type: String,
      default: '../../static/default_avatar.png'
    },
    index: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    this.initVideo()
  },
  methods: {
    pauseAll () {
      let myVideos = document.getElementsByClassName('vjs-tech')
      // 一次只能有一个播放，暂停其它的视频播放
      for (let video of myVideos) {
        // video.pause()
        video.pause()
      }
    },
    changeViDeoState (e) {
      let video = e.target
      if (video.paused) {
        this.pauseAll()
        video.play()
      } else {
        video.pause()
      }
      // this.$refs.scroll.refresh()
    },
    initVideo () {
      // 初始化视频方法
      let myVideos = document.getElementsByClassName('myVideo')
      let myVideo = myVideos[this.index]
      /* eslint-disable-next-line */
      let myPlayer = this.$video(myVideo, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: this.controls,
        // 自动播放属性,muted:静音播放
        autoplay: this.autoplay,
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: this.preload,
        // 设置视频播放器的显示宽度（以像素为单位）
        width: this.width,
        // 设置视频播放器的显示高度（以像素为单位）
        height: this.height,
        fluid: this.fluid,
        poster: this.poster
      })
      // let playBtns = document.getElementsByClassName('vjs-play-control')
      // let playBtn = playBtns[this.index]
      // console.log(playBtn.onClick)
    }
  }
}
</script>

<style lang="stylus">
  .videoBox
  {
    width 100%
    min-height 200px
    position relative
    overflow hidden
    .vjs-poster
    {
      background-size cover
    }
    .myVideo
    {
      width 100%!important
      min-height 100%!important
      object-fit fill
      button.vjs-big-play-button
      {
        position absolute
        top:0
        left 0
        right 0
        bottom 0
        margin auto
      }
    }
  }
</style>
